<!DOCTYPE html>
<html lang="en">
<head>
	<title>团队组成</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="css/common.css" rel="stylesheet" media="screen">
	<link href="css/team.css" rel="stylesheet" media="screen">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.tmpl.js"></script>
	<script type="text/javascript">

		var my_u_id;
		$(document).ready(function(){
		    $("#modify,#delete,#confirm").hide();
			$("#modify").click(function(){
					replace_span('name');
					replace_span('sex');
					replace_span('birth');
					replace_span('major');
					replace_span('per');
					replace_span('mark');
					$('#modify').hide();
					$('#confirm').show();
				});
			$('#confirm').click(function(){
					$.post('staff/modify',
							{uid:my_u_id,
							 name:$('#name').val(),
							 sex:$('#sex').val(),
							 birth:$('#birth').val(),
							 major:$('#major').val(),
							 per:$('per').val(),
							 mark:$('mark').val()},
							function(data){
								alert('sucess');
								});
				});
			});


		function replace_span(span)
		{
			val=$('#'+span).html();
			$('#'+span).replaceWith('<input id='+span+' value='+val+'>')
		}


		
		function userdetail(id)
		{
			my_u_id =id;
			$("#modify,#delete").show();
			$('#project').html('');
			$.post('staff/detail',
					{uid:id},
					function(data){
						$('#name').html(data.Name);
						$('#sex').html(data.Sex);
					    $('#birth').html(data.Birth);
					    $('#major').html(data.Major);
					    $('#per').html(data.Permission);
					    $('#mark').html(data.Mark);
						},'json'
						);
			$.post('staff/project',
					{uid:id},
					function(data){
						$.each(data,function(index,content){
							$('#project').append(content.PName);
							});
						},'json'
						);
		}

	</script>
</head>
<body>
	<div class="header">
		<a href="#"><img height="70" width="199" src="images/LOGO.png"></a>
		<button class="btn" style="float:right; margin-right:30px; margin-top:5px;" type="button">注销</button>
		<div class="clear"></div>
		<li class="bar"><a class="bar_info" href="./Infopage"></a></li>
		<li class="bar"><a class="bar_resource" href="#"></a></li>
		<li class="bar"><a class="bar_project" href="#"></a></li>
		<li class="bar"><a class="bar_team_onclick" href="#"></a></li>
		<li class="bar"><a class="bar_future" href="#"></a></li>
</div>
	<div class="content"> 
		<div class="member_list">
			<div id="member">
			
				<ul>
					<?php for($i=0;$i<count($member);$i++){?>
					<li id=<?php echo $ID[$i]?>><a href="javascript:userdetail(<?php echo $ID[$i];?>)"><?php echo $member[$i];?></a>
					<?php }?>
				</ul>
				<button id="addBtn" type="button"></button>
			</div>	
		</div>
		<div class="member_info">
			<span class="headerFont">成员信息：</span>
			<form class="form">
			姓名：<span id='name'></span><br><br>
			性别：<span id='sex'></span><br><br>
			生日：<span id='birth'></span><br><br>
			专业：<span id='major'></span><br><br>
			权限：<span id='per'></span><br><br>
			参与的项目:<br><span id='project' class='project'></span><br>
			备注:<span id='mark'></span><br><br>
			<div class='modify'>
			<button type='button' id='delete'>删除</button>
			<button type='button' id='modify'>修改</button>
			<button type='button' id='confirm'>确定</button>
			</div>
			</form>
			
		</div>
		
		<div class='clear'></div>
	</div>
	<div class='foot'>
		
	</div>

	
</body>
</html>